<!--
 * @Author: your name
 * @Date: 2021-08-03 15:46:27
 * @LastEditTime: 2021-08-12 17:09:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /shb-pc-fe/src/modules/report/product/productView.vue
-->
<template>
  <div class="stats-container">
    <div class="stats-form stats-customer-form">
      <div>
        <el-select v-model="hasBindCustomer" @change="getProduct" :placeholder="$t('common.form.preview.fbCustomer.pla2')"> 
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
        </el-select>
      </div>
      <div class="stats-form-group">
         <el-date-picker
          v-model="datePicker"
          type="datetimerange"
          value-format="timestamp"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions"
          :range-separator="$t('common.base.to')"
          :start-placeholder="$t('common.base.startDate')"
          :end-placeholder="$t('common.base.endDate')"
          @change="timeChange"
          align="right">
        </el-date-picker>
      </div>
    </div>

    <div class="stats-customer-head">
      <div class="stats-customer-card">
        <div class="stats-customer-card-info">
          <h3>{{ countData.productTotal }}</h3>
          <p>
            {{ $t('common.base.column.productCount') }}
            <el-popover trigger="hover">
              <ul>
                <li>{{$t('report.product.title1')}}</li>
              </ul>
              <stats-popover-icon slot="reference"></stats-popover-icon>
            </el-popover>
          </p>
        </div>
         <span class="product-img">
         <i class="iconfont icon-caidan-chanpin1"></i>
       </span>
      </div>
      <div class="stats-customer-card">
        <div class="stats-customer-card-info">
          <h3>{{countData.newCreateProductTotal}}</h3>
          <p>
            {{$t('common.form.preview.product.btn1')}}
            <el-popover trigger="hover">
              <ul>
                <li>{{ $t('report.product.title2') }}</li>
              </ul>
              <stats-popover-icon slot="reference"></stats-popover-icon>
            </el-popover>
          </p>
        </div>
        <span class="product-img">
         <i class="iconfont icon-tianjiachanpin"></i>
        </span>
      </div>
      <div class="stats-customer-card">
        <div class="stats-customer-card-info">
          <h3>{{countData.bindQrCodeProductTotal}}</h3>
          <p>
            {{$t('report.product.title3')}}
            <el-popover trigger="hover">
              <ul>
                <li>{{$t('report.product.title1')}}</li>
              </ul>
              <stats-popover-icon slot="reference"></stats-popover-icon>
            </el-popover>
          </p>
        </div>
          <span class="product-img">
         <i class="iconfont icon-erweima"></i>
        </span>
      </div>
    </div>

     <div class="stats-row">
      <div class="stats-panel">
        <div class="stats-panel-head stats-form">
          <h3>{{ $t('report.statistics.title46')}}
          </h3>
        </div>
        <div class="stats-panel-body">
          <div style="text-align:center;">
            <div class="stats-btn-group">
              <button type="button" :class="{'stats-checked': chart == 'product-type'}" 
                      @click="chooseChart('product-type')">{{$t('common.base.column.productType')}}</button>
            </div>
          </div>
          <keep-alive>
            <component
              :is="chart"
              :chart-data="pieData"
              :time-start="createTimeStart"
              :time-end="createTimeEnd"
              v-loading="loading"
              :chart-type="chartType"
              :loading="loading">
            </component>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import productType from './components/productType.vue';
import { nearDateBy, dayTimeEnd, useDatePicker } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { t } from '@src/locales'
const datePicker = useDatePicker()

export default {
  name: 'product-view',
  data() {
    const startTime = +nearDateBy(1, 'week');
    const endTime = +dayTimeEnd();
    const chartType = window.location.href.split('type=')[1]
    return {
      chartType,
        hasBindCustomer:-1,
         datePicker:[startTime, endTime],
         createTimeEnd:'',
         createTimeStart:'',
         pickerOptions: {
          shortcuts: [
            datePicker.nearDate(t('common.time.lastWeek'), 1, 'week'),
            datePicker.nearDate(t('common.time.lastMonth'), 1, 'month'),
            datePicker.nearDate(t('common.time.lastThreeMonth'), 3, 'month'),
          ]
        },
        options:[{label:t('product.list.allProduct'),value:-1},
          {label:t('report.product.title4'),value:1},
          {label:t('report.product.title5'),value:0},
        ],
        countData: {
          productTotal: '--',
          newCreateProductTotal: '--',
          bindQrCodeProductTotal: '--'
      },
      chart:'product-type',
      pieData:{},
      timeStart:'',
      timeEnd:'',
      loading: false
    }
  },
  mounted(){
   this.getProduct()
  },
  methods:{
    timeChange() {
      this.getProduct()
      this.chartType && this.$track.commonFn.chartTrack(this.chartType, 'REPORT_SEARCH_TIME', this.$track)
    },
    getProduct(){
      let params={
        createTimeStart: this.datePicker[0],
        createTimeEnd: this.datePicker[1],
        hasBindCustomer:this.hasBindCustomer,
      }

     this.loading = true
     this.$http.post('/api/report/outside/product/report/productReportCount',params).then(res=>{
       if(res.code===0){
         this.countData=res.result
         this.pieData=res.result.catalogProductMap
       }
     }).catch(err => {
        console.error(err)
      })
      .finally(() => {
        this.loading = false
      })
    },
   formatDateT(dateTime){ // 中国标准时间转换成格林尼治时间
      let  newDate = safeNewDate(dateTime + 8 * 3600 * 1000);
      return newDate.toISOString();  
   },
    chooseChart(chart){
          this.trackEventHandler(chart);

          this.chart = chart;
      },
          // TalkingData事件埋点
    trackEventHandler(type) {
      let msg = '';
      switch (type) {
      case 'product-type':
        msg = 'pc：产品报表-产品类型';
        break;
      default:
        break;
      }
      this.$tdOnEvent(msg);
    },
  },
  components: {
    [productType.name]: productType,
  }
}
</script>
<style lang="scss" scoped>
.stats-customer-form {
  padding: 5px 7.5px;
  justify-content: flex-end;
}

.stats-customer-head {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 7.5px;
}

.stats-customer-card {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-left: 15px;

  border-radius: 2px;
  background-color: #fff;

  &:first-child {
    margin-left: 0;
  }

  img {
    display: block;
    height: 60px;
    width: 60px;
    border: none;
    margin-right: 10px;
  }
}

.stats-customer-card-info {
  padding: 0 10px;
  flex: 1;
  h3 {
    margin: 0;
    padding: 12.5px 0 10px 0;
    font-size: 38px;
    font-weight: 400;
  }

  p {
    color: #666;
    font-size: 18px;
    margin: 0;
    padding: 5px 0 15px 0;
  }
}
.product-img{
  color:#FAAD14;
  margin-right: 10px;
  i{
    font-size:60px ;
  }
}
</style>
<style lang="scss">
#product-type-chart{
  height: 520px;
}
</style>